<template>
  <div>
    <div class="tableHeader">
      <div class="tableHeaderTitle">应用列表</div>
      <div class="tableHeaderMenu">
        <el-button-group>
          <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
        </el-button-group>
      </div>
    </div>
    <el-table ref="multipleTable" :data="applicationData" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="cma_name" label="应用名称" width="150"></el-table-column>
      <el-table-column prop="serverStatus" label="服务状态" width="90">
          <template slot-scope="scope">
            <div class="system_status" style="color:green" v-if="scope.row.serverStatus == '1'">
                <i class="fa fa-circle fa-lg"></i>&nbsp;&nbsp;运行中
            </div>
            <div class="system_status" style="color:red" v-if="scope.row.serverStatus == '0'">
                <i class="fa fa-circle fa-lg"></i>&nbsp;&nbsp;已停止
            </div>
          </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" @click="handleBasic(scope.row)">详细信息</el-button>
            <el-button size="mini" @click="handleAdminManager(scope.row)">数据管理后台</el-button>
            <el-button size="mini" @click="handleApiDemo">接口演示文档</el-button>
            <el-button size="mini" @click="handleTemplate(scope.row)">配套模板</el-button>
            <el-button size="mini" @click="handleServiceManager(scope.row)">服务管理</el-button>
            <el-button size="mini" @click="handleMoreService">更多服务...</el-button>
            <el-button size="mini" type="danger" @click="handleDeleteApp(scope.row)">删除应用</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  //数据源
  data() {
    return {

    }
  },
  //初始化函数
  mounted() {
    this.initData('init');
  },
  //计算属性
  computed: {
    ...mapState({
      applicationData: state => state.ApplicationListModule.applicationData
    })
  },
  //组件方法
  methods: {
    initData(type){

      if(type == 'init'){
        this.$myLoading.startLoading()
      }
      
      this.$http.getHttp(
        this.$API.userGetApplicationList + "/userid/" + this.$localData.getUserId(),
        rs => {
          this.$store.commit('ApplicationListModule/updateApplicationData',rs)

          if(type == 'init'){
            this.$myLoading.endLoading()
          }
        }
      )
    },
    handleDeleteApp(item){

      this.$myPop.confirmBox("确认操作","您确定要删除该应用吗？",()=>{

        var params = {
          cma_id : item.cma_id,
          username : this.$localData.getUserName(),
          appKey : item.cma_app_key
        }

        this.$myLoading.startLoading()
        this.$http.postHttp(
          this.$API.userDeleteApplication,
          params,
          rs => {
            this.$myLoading.endLoading();
            this.$myPop.SuccessMessage();
            this.initData('update');
          }
        )

      })
    },
    handleBasic(item){
        this.$router.push({
           path: "/applicationBasicInfo",
           query : {
               appid : item.cma_id
           }
        })
    },
    handleApiDocs(){
        this.$router.push({
           path: "/applicationApiDocs",
           query : {
               
           }
        })
    },
    handleTemplate(item){
        this.$router.push({
           path: "/applicationMatingTemplate",
           query : {
               appid     : item.cma_id,
               productId : item.cma_apid,
               appKey    : item.cma_app_key
           }
        })
    },
    handleApiDemo(){
        this.$router.push({
           path: "/applicationApiDemo",
           query : {
               
           }
        })
    },
    handleAdminManager(item){
        
        //获取数据管理层信息
        this.$myLoading.startLoading()
        this.$http.getHttp(
          this.$API.easydCloudMemberApplicationContainerSearch + "/cmac_cmaid/" + item.cma_id + "/cmac_type/2",
          rs => {

            this.$myLoading.endLoading()

            var managerData = rs.data[0];

            //拼接管理层访问地址
            var managerURL = this.$global.cloudServer + ":" + managerData.cmac_out_port

            //跳转至管理端
            window.open(managerURL);
                
          }
        )

    },
    handleMoreService(){
      this.$router.push({
           path: "/applicationMoreService",
           query : {
               
           }
        })
    },
    handleServiceManager(item){

        this.$router.push({
           path: "/applicationServiceManager",
           query : {
              appid : item.cma_id
           }
        })
    },
    refreshData(){

    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>